<template>
  <div class="index-header">
    <!-- 首页头部 -->
    <!-- 使用layout布局 -->
    <el-row>
      <ElCol :span="9">
        <div class="header-right">
          <el-carousel height="220px">
            <el-carousel-item v-for="item in lunbotus" :key="item.id">
              <!-- <a href="#">
                <img :src="'/img/lunbo ('+(item%3+1)+').jpg'" alt srcset>
              </a>-->
              <div class="lunbotu" :title="item.remark">
                <a :href="item.url" target="_blank">
                  <img :src="baseUrl+item.src" alt srcset>

                  <div class="remark">
                    <p>{{item.remark}}</p>
                  </div>
                </a>
              </div>
            </el-carousel-item>
            <!-- <el-carousel-item>
              <a href="#">
                <img :src="'/img/gan.png'" alt srcset>
              </a>
            </el-carousel-item>-->
          </el-carousel>
        </div>
      </ElCol>
      <ElCol :span="15">
        <div class="header-left">
          <el-card
            v-for="item in tops"
            :key="item.id"
            shadow="hover"
            class="el-card"
            :body-style="{padding:'0px'}"
          >
            <!-- <a href="#">
              <img src="/img/gan.png" alt srcset>
              <div class="card-mask">
                <p class="title">&nbsp;&nbsp;不要怂就是干！！！</p>
                <p class="author">up:黄丫丫丫</p>
                <p class="play">播放量:29万</p>
              </div>
            </a>-->
            <div class="top-rank" @click="toPlay(item.id)">
              <img :src="baseUrl+item.coverPhoto" alt="图片失效" srcset>
              <div class="card-mask">
                <p class="title">&nbsp;&nbsp;{{item.title}}</p>
                <p class="author">up:{{item.userName}}</p>
                <p class="play">播放量:{{item.playNum}}</p>
              </div>
            </div>
          </el-card>
        </div>
      </ElCol>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "index-header",
  data: function() {
    return {
      lunbotus: [],
      baseUrl: this.GLOBAL.baseFilePath,
      tops: []
    };
  },
  methods: {
    getLunbotuList() {
      this.axios.post("lunbotu/list").then(res => {
        this.lunbotus = res.data.list;
        console.log("lunbotus", this.lunbotus);
      });
    },
    getTop() {
      this.axios
        .post("video/top", {
          pageSize: 8
        })
        .then(res => {
          this.tops = res.data.page.list;
        });
    },
    toPlay(id) {
      let routeUrl = this.$router.resolve({
        name: "play",
        query: { id: id }
      });
      window.open(routeUrl.href, "_blank");
    }
  },
  mounted() {
    this.getLunbotuList();
    this.getTop();
  }
};
</script>

<style scoped lang="scss">
img {
  width: 100%;
  max-height: 100%;
}

.index-header {
  .header-right {
    height: 100%;
  }
  .header-left {
    //头部左侧视频栏
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 220px;
    .el-card {
      //左侧栏目卡片
      max-height: 100px;
      max-width: 160px;
      margin: 0 0 18px 18px;
      position: relative;
      &:hover {
        //鼠标覆盖卡片上，显示详情
        .card-mask {
          top: 0;
          padding: 12px 0 0 6px;
          background: rgba(0, 0, 0, 0.6);
          .author {
            opacity: 1;
          }
          .play {
            opacity: 1;
          }
        }
      }
      .card-mask {
        position: absolute;
        top: 82px;
        height: 100%;
        width: 160px;
        line-height: 20px;
        overflow: hidden;
        font-size: 12px;
        padding: 0 0 0 3px;

        .title {
          color: #fff;
          height: 40px;
          overflow: hidden;
          margin-bottom: 5px;
          word-break: break-all;
          word-wrap: break-word;
        }
        .author {
          opacity: 0;
          color: #99a2aa;
          height: 20px;
          line-height: 20px;
          overflow: hidden;
          transition: all 0.6s;
        }
        .play {
          opacity: 0;
          color: #99a2aa;
          height: 20px;
          line-height: 20px;
          overflow: hidden;
          transition: all 0.6s;
        }
        p {
          margin: 0;
        }
      }
    }
    //图片框
    .top-rank {
      width: 160px;
      height: 100px;
      cursor: pointer;
    }
  }
  //轮播图样式
  .lunbotu {
    height: 100%;
    position: relative;
    &:hover {
      .remark {
        background: rgba(0, 0, 0, 0.6);
        opacity: 1;
      }
    }
    .remark {
      opacity: 0;
      color: seashell;
      height: 100%;
      width: 100%;
      position: absolute;
      bottom: 0;
      left: auto;
      right: auto;
      text-align: center;
      p {
        font-size: 14px;
      }
    }
  }
}

/* 组件自带样式 */
.el-carousel__item img {
  height: 400px;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>